<!--
 * @Author: guandeshen 295570679@qq.com
 * @Date: 2024-08-20 21:20:43
 * @LastEditors: guandeshen 295570679@qq.com
 * @LastEditTime: 2024-09-04 21:21:12
 * @FilePath: /task-admin/src/views/system/menu/index copy.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by RSC, All Rights Reserved. 
-->
<template>
  <div class="container">
    <!-- 列表 -->
    <page-content
      ref="contentRef"
      :stripe="true"
      :content-config="contentConfig"
      :is-tree="true"
      @add-click="handleOpenDialog"
      @edit-click="handleOpenDialog"
    >
      <template #ismenu="scope">
        <el-tag :type="scope.row.ismenu == 1 ? 'primary' : 'success'">{{
          scope.row.ismenu == 1 ? $t("common.menu") : $t("common.directory")
        }}</el-tag>
      </template>
      <template #status="scope">
        <el-tag :type="scope.row.status == 'normal' ? 'primary' : 'info'">{{
          scope.row.status == "normal" ? $t("common.show") : $t("common.hide")
        }}</el-tag>
        <!-- <el-switch
          v-model="scope.row.status"
          active-value="normal"
          inactive-value="hidden"
        /> -->
      </template>
    </page-content>
    <!-- 新增表单弹窗 -->

    <el-drawer
      v-model="dialog.visible"
      :title="dialog.title"
      size="480px"
      @close="handleCloseDialog"
    >
      <el-form
        ref="menuFormRef"
        :model="formData"
        :rules="rules"
        label-position="top"
      >
        <el-row :gutter="32">
          <el-col :span="24">
            <el-form-item :label="$t('common.parentMenu')" prop="pid">
              <el-tree-select
                v-model="formData.pid"
                :placeholder="$t('common.selectParentMenu')"
                :data="menuOptions"
                default-expand-all
                filterable
                check-strictly
                :render-after-expand="false"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item :label="$t('common.menuType')" prop="ismenu">
              <el-radio-group
                v-model="formData.ismenu"
                @change="handleMenuTypeChange"
              >
                <el-radio :value="0">{{ $t("common.directory") }}</el-radio>
                <el-radio :value="1">{{ $t("common.menu") }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item prop="title">
              <template #label>
                <div>
                  {{ $t("common.menuName") }}
                  <el-tooltip placement="bottom" effect="light">
                    <template #content>
                      {{ $t("common.menuNameTips") }}
                    </template>
                    <i-ep-QuestionFilled class="inline-block" />
                  </el-tooltip>
                </div>
              </template>
              <el-input
                v-model="formData.title"
                :placeholder="$t('common.pleaseEnter')"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item prop="name">
              <div>
                {{ $t("common.route") }}
                <el-tooltip placement="bottom" effect="light">
                  <template #content>
                    {{ $t("common.routePathTip") }}
                  </template>
                  <i-ep-QuestionFilled class="inline-block" />
                </el-tooltip>
              </div>
              <el-input
                v-model="formData.name"
                :placeholder="$t('common.pleaseEnter')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('common.component')" prop="component">
              <el-input
                v-model="formData.component"
                :placeholder="$t('common.pleaseEnter')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('common.icon')" prop="icon">
              <icon-select v-model="formData.icon" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="32">
          <el-col :span="12">
            <el-form-item :label="$t('common.status')" prop="status">
              <el-switch
                v-model="formData.status"
                active-value="normal"
                inactive-value="hidden"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('common.sort')" prop="weigh">
              <el-input-number v-model="formData.weigh" :min="0" :max="99999" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">{{
            $t("common.save")
          }}</el-button>
          <el-button @click="handleCloseDialog">{{
            $t("common.cancel")
          }}</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import contentConfig from "./config/content";
import type { IObject } from "@/hooks/usePage";
import { MenuTreeList, MenuForm, SelectMenuTree } from "@/api/menu/model";
import type PageContent from "@/components/PageContent/index.vue";
import MenuAPI from "@/api/menu";
const { t } = useI18n();
// 弹窗
const dialog = reactive({
  title: "",
  visible: false,
});

// 初始菜单表单数据
const initialMenuFormData = ref<MenuForm>({
  id: undefined,
  pid: "",
  name: "",
  title: "",
  ismenu: 1,
  status: "normal",
  weigh: 0,
  spacer: "",
  icon: "",
  childlist: [],
});

// 菜单表单数据
const formData = ref({ ...initialMenuFormData.value });

const rules = reactive({
  // name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  // code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
  // dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
  // status: [{ required: true, message: "请选择状态", trigger: "blur" }],
});

// 顶级菜单下拉选项
const menuOptions = ref<SelectMenuTree[]>([]);
function mapKeys(obj: MenuTreeList): SelectMenuTree {
  return {
    label: obj.title,
    value: obj.id,
    children: obj.childlist?.map(mapKeys),
  };
}
// 新增、编辑
function handleOpenDialog(row?: IObject) {
  const pageData = contentRef.value?.pageData as MenuTreeList[];
  const newOptions: SelectMenuTree[] = pageData.map((obj) => mapKeys(obj));
  menuOptions.value = [
    {
      value: "0",
      label: t("common.topMenu"),
      children: newOptions as SelectMenuTree[],
    },
  ];
  dialog.visible = true;
  if (row?.id) {
    dialog.title = t("common.modifyMenu");
    Object.assign(formData, row);
    initialMenuFormData.value = { ...row };
    // MenuAPI.getbasicInfoFormFormRef.value.formData(projectId).then((data) => {
    //   Object.assign(basicInfoFormFormRef.value.formData, data);
    // });
  } else {
    dialog.title = t("common.addMenu");
  }
}

/** 关闭弹窗 */
const menuFormRef = ref(ElForm);
function handleCloseDialog() {
  dialog.visible = false;
  menuFormRef.value.resetFields();
  menuFormRef.value.clearValidate();
  formData.value.id = undefined;
  formData.value.status = "normal";
  formData.value.ismenu = 1;
}

// 菜单类型切换
function handleMenuTypeChange() {
  // 如果菜单类型改变
  if (formData.value.ismenu !== initialMenuFormData.value.ismenu) {
    if (formData.value.ismenu === 1) {
      // 目录切换到菜单时，清空组件路径
      formData.value.name = "";
    }
  }
}

/** 提交表单 */
const loading = ref(false);
const contentRef = ref<InstanceType<typeof PageContent>>();
function handleSubmit() {
  menuFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      const Id = formData.value.id;
      MenuAPI.add(formData.value)
        .then(() => {
          ElMessage.success(
            Id
              ? t("common.modifiedSuccessfully")
              : t("common.newSuccessfullyAdded")
          );
          handleCloseDialog();
          contentRef.value?.fetchPageData({}, true); //重置查询
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}
</script>

<style scoped>
/* @import url(); 引入公共css类 */
</style>
